<template>
	<el-container>
        <el-header>
            <div class="right-panel-search">
                <div class="search-input">工厂</div>
                <el-select v-model="search.supplier_id" filterable placeholder="请选择工厂" clearable>
                    <el-option v-for="item in applyList" :key="item.apply_id" :label="item.apply_name" :value="item.apply_id"/>
                </el-select>
                <div class="search-input">状态</div>
                <el-select v-model="search.status" placeholder="状态" clearable>
                    <el-option label="未付款" :value="1"/>
                    <el-option label="已付款" :value="2"/>
                </el-select>
                <el-button type="primary" icon="el-icon-search" @click="upsearch">搜索</el-button>
            </div>
        </el-header>
        <el-main class="nopadding">
            <scTable ref="table" :apiObj="order" stripe remoteSort remoteFilter border :params="query" show-summary>
                <el-table-column type="selection" width="50"></el-table-column>
                <el-table-column label="对账单编号" prop="order_no" align="center"></el-table-column>
                <el-table-column label="添加时间" prop="create_time" align="center"></el-table-column>
                <el-table-column label="工厂" align="center">
                    <template #default="{row}">
                            <div>{{row.supplier.referred_as}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="供应商分类" align="center">
                    <template #default="{row}">
                            <div>{{row.supplier.apply_cate_name}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="联系人" align="center">
                    <template #default="{row}">
                            <div>{{row.supplier.linkman}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="联系方式" align="center">
                    <template #default="{row}">
                            <div>{{row.supplier.mobile}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="实际需付" prop="meet_money" align="center"></el-table-column>
                <el-table-column label="状态" align="center">
                    <template #default="scope">
                        <el-tag v-if="scope.row.status==1" type="danger">未付款</el-tag>
                        <el-tag v-else type="success">已付款</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="付款时间" align="center">
                    <template #default="{row}">
                        <div>{{row.pay_time}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right" align="center" width="90">
                    <template #default="scope">
                        <el-button-group style="display:flex;flex-direction:column">
                            <el-button text type="primary" size="small" @click="payment(scope.row, scope.$index)" v-auth="'devFactoryAble.payment'" v-if="scope.row.status==1">付款</el-button>
                            <el-button text type="primary" size="small" @click="table_export(scope.row, scope.$index)" v-auth="'devFactoryAble.export'">导出</el-button>
                        </el-button-group>
                    </template>
                </el-table-column>
            </scTable>
        </el-main>
    </el-container>
    <pay-save v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save = false" draggable></pay-save>
    <day-save v-if="dialog.day" ref="dayDialog" @success="handleSuccess" @closed="dialog.day = false" draggable></day-save>
</template>

<script>
import PaySave from './paySave.vue'
import DaySave from './daySave.vue';
export default {
    components: {PaySave,DaySave},
	name: 'user',
	data() {
		return {
            dialog: {
				save: false,
			},
			order: this.$API.inventory.billMaster,//订单
			search: {
				supplier_id: null,
                status:1,
			},
            query:{
                is_finance:1,
                status:1,
                apply_type:3,
                order_type:2,
            },
            applyList:[],
            groupId:'0'
		}
	},
	mounted() {
        this.getApply()
	},
	methods: {
		//添加
		add() {
            this.$router.push({
                path: '/finance/Payment',
            })
		},
        // 付款
        payment(row) {
			this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.saveDialog.open("over").setData(row);
			})
		},
        // 账单详情
        table_dayDel(row){
            this.dialog.day = true
			this.$nextTick(() => {
				this.$refs.dayDialog.open('edit').setData(row)
			})
        },
        // 导出
        async exports(row){
            var res = await this.$API.inventory.billMaster.get({id:row.id,is_finance:1,is_export:1});
            if (res.code == 1) {
                const fileUrl = res.data.url;
                const link = document.createElement("a");
                link.href = fileUrl;
                link.download = fileUrl;
                link.click();
            } else {
                this.$alert(res.message, "提示", { type: "error" });
            }
        },
        //搜索
		upsearch() {
			this.$refs.table.upData(this.search)
		},
        //本地更新数据
		handleSuccess(data, mode) {
			if (mode == 'over') {
				this.$refs.table.refresh()
			} else if (mode == 'edit') {
				this.$refs.table.refresh()
			} else if (mode == 'set') {
				this.$refs.table.refresh()
			}
		},
        // 获取工厂
        async getApply(){
            var res = await this.$API.all.Apply.get({type:1});
            this.applyList = res.data;
        },
        async table_export(row){
            var res = await this.$API.inventory.cum.out.get({id:row.id});
            if (res.code == 1) {
                if(res.data.rows !=''){
                    const fileUrl = res.data.rows.url;
                    const link = document.createElement("a");
                    link.href = fileUrl;
                    link.download = fileUrl;
                    link.click();
                }else{
                    this.$alert("请求异常", "提示", { type: "error" });
                }
			} else {
				this.$alert(res.message, "提示", { type: "error" });
			}
        },
	}
}
</script>

<style lang="scss" scoped>
.inputDeep {
  :deep(.el-input__wrapper) {
    box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color)) inset;
    height: 20px;
    background: transparent;
    cursor: default;
    .el-input__inner {
      cursor: default !important;
    }
  }
}
</style>
